<template>
    <div class="create-match-container">
        <h2>Create Match</h2>
        <a-form :model="formState" @finish="onFinish">
            <a-form-item label="Opponent Name">
                <a-input v-model:value="formState.opponentName" />
            </a-form-item>
            <a-form-item label="Position">
                <a-input v-model:value="formState.position" />
            </a-form-item>
            <a-form-item label="Match Date">
                <a-date-picker v-model:value="formState.matchDate" show-time />
            </a-form-item>
            <a-form-item label="Knockout Time">
                <a-input v-model:value="formState.knockoutTime" />
            </a-form-item>
            <a-form-item label="Result">
                <a-input v-model:value="formState.result" />
            </a-form-item>
            <a-form-item label="First Half Score">
                <a-input v-model:value="formState.firstHalfScore" />
            </a-form-item>
            <a-form-item label="Second Half Score">
                <a-input v-model:value="formState.secondHalfScore" />
            </a-form-item>
            <a-form-item label="First Half My Lost">
                <a-input v-model:value="formState.firstHalfMyLost" />
            </a-form-item>
            <a-form-item label="First Half Opponent Lost">
                <a-input v-model:value="formState.firstHalfOpponentLost" />
            </a-form-item>
            <a-form-item label="First Half Lost Sets">
                <a-input v-model:value="formState.firstHalfLostSets" />
            </a-form-item>
            <a-form-item label="Second Half My Lost">
                <a-input v-model:value="formState.secondHalfMyLost" />
            </a-form-item>
            <a-form-item label="Second Half Opponent Lost">
                <a-input v-model:value="formState.secondHalfOpponentLost" />
            </a-form-item>
            <a-form-item label="Second Half Lost Sets">
                <a-input v-model:value="formState.secondHalfLostSets" />
            </a-form-item>
            <a-form-item>
                <a-button type="primary" html-type="submit">Create</a-button>
            </a-form-item>
        </a-form>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import axios from '../axios';
import { useRouter } from 'vue-router';
import { message } from 'ant-design-vue';

const router = useRouter();
const formState = ref({
  opponentName: '',
  position: '',
  matchDate: '',
  knockoutTime: '',
  result: '',
  firstHalfScore: '',
  secondHalfScore: '',
  // 新增字段
  firstHalfMyLost: '',       // 上半场我方失分
  firstHalfOpponentLost: '', // 上半场对方失分
  firstHalfLostSets: '',     // 上半场失局数
  secondHalfMyLost: '',      // 下半场我方失分
  secondHalfOpponentLost: '',// 下半场对方失分
  secondHalfLostSets: '',    // 下半场失局数
});
const onFinish = async () => {
  try {

    // 提交表单数据
    await axios.post('/matchs', formState.value);
    message.success('match create successfully');
    router.push({ name: 'MatchRecord' });
  } catch (err) {
    console.error('Failed to create match', err);
    message.error('match create failed');
  }
};
</script>

<style scoped>
.create-match-container {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

h2 {
  margin-bottom: 20px;
  font-size: 24px;
  color: #333;
}
</style>